<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0,maximum-scale=1.0" />
    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
    <link rel="stylesheet" type="text/css" href="css/reset.css"/>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/public.js" type="text/javascript" charset="utf-8"></script>
    <title>个人信息</title>
</head>
<body>
	<div id="personal">
		<div class="personalCon">
			<a href="javascript:void(0);" class="preList">
				<span class="listName">修改头像</span>
				<img class="userIcon" id="UIcon" src="images/pic_photo@2x.png"/>
				<input type="file" name="pic" id="userface" accept="image/*" onchange="preview(this)" capture="camera"/>
			</a>
			<a href="javascript:void(0);" class="preList">
				<span class="listName">昵称</span>
				<span class="userName">天天</span>
			</a>
		</div>
		
		<button class="quit">退出登录</button>
	</div>
<script type="text/javascript">
	//选择上传的图片
	
	//显示图片
	function preview(this5){
		var objUrl = getObjectURL(this5.files[0]) ; //获取图片的路径，该路径不是图片在本地的路径
      	console.log(window.URL.createObjectURL(this5.files[0]))
      	console.log(this5.files[0])
      	if (objUrl) {
        	$(this5).parent().find("#UIcon").attr("src", objUrl) ; //将图片路径存入src中，显示出图片
      	}
	}
    function getObjectURL(file) {
            var url = null ;
            if (window.createObjectURL!=undefined) { // basic
                url = window.createObjectURL(file) ;
            } else if (window.URL!=undefined) { // mozilla(firefox)
                url = window.URL.createObjectURL(file) ;
            } else if (window.webkitURL!=undefined) { // webkit or chrome
                url = window.webkitURL.createObjectURL(file) ;
            }
            return url ;
        }

</script>
</body>
</html>
